<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务评价 - 医院陪护系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .appointment-card {
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .star-rating {
            font-size: 24px;
            cursor: pointer;
        }
        .star-rating .star {
            color: #ddd;
        }
        .star-rating .star.active {
            color: #ffc107;
        }
    </style>
</head>
<body>
<div class="container py-5">
    <h2 class="mb-4">我的预约</h2>

    <div id="appointmentsList">
        <!-- 动态加载预约列表 -->
    </div>

    <!-- 评价模态框 -->
    <div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">服务评价</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="reviewForm">
                        <input type="hidden" id="appointmentId">
                        <input type="hidden" id="escortId">
                        <div class="mb-3">
                            <label class="form-label">陪诊员</label>
                            <input type="text" class="form-control" id="reviewEscortName" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">评分</label>
                            <div class="star-rating mb-2">
                                <span class="star" data-rating="1"><i class="far fa-star"></i></span>
                                <span class="star" data-rating="2"><i class="far fa-star"></i></span>
                                <span class="star" data-rating="3"><i class="far fa-star"></i></span>
                                <span class="star" data-rating="4"><i class="far fa-star"></i></span>
                                <span class="star" data-rating="5"><i class="far fa-star"></i></span>
                            </div>
                            <input type="hidden" id="rating" value="5">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">评价内容</label>
                            <textarea class="form-control" id="reviewContent" rows="3" placeholder="请写下您的评价..."></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitReview()">提交评价</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 获取用户ID - 实际项目中应从登录状态获取
    const userId = 1;

    // 页面加载时获取预约列表
    document.addEventListener('DOMContentLoaded', function() {
        fetchAppointments();

        // 初始化星级评分
        const stars = document.querySelectorAll('.star-rating .star');
        stars.forEach(star => {
            star.addEventListener('click', function() {
                const rating = parseInt(this.getAttribute('data-rating'));
                document.getElementById('rating').value = rating;

                stars.forEach((s, index) => {
                    if (index < rating) {
                        s.innerHTML = '<i class="fas fa-star"></i>';
                        s.classList.add('active');
                    } else {
                        s.innerHTML = '<i class="far fa-star"></i>';
                        s.classList.remove('active');
                    }
                });
            });
        });
    });

    // 获取用户预约列表
    function fetchAppointments() {
        axios.get(`/api/appointment/list?userId=${userId}`)
            .then(response => {
                const appointments = response.data;
                const appointmentsList = document.getElementById('appointmentsList');
                appointmentsList.innerHTML = '';

                if (appointments.length === 0) {
                    appointmentsList.innerHTML = '<div class="alert alert-info">暂无预约记录</div>';
                    return;
                }

                appointments.forEach(appointment => {
                    const statusText = getStatusText(appointment.status);
                    const statusClass = getStatusClass(appointment.status);

                    const card = document.createElement('div');
                    card.className = 'card appointment-card';
                    card.innerHTML = `
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <h5>${appointment.serviceTypeName}</h5>
                                    <span class="badge ${statusClass}">${statusText}</span>
                                </div>
                                <p class="mb-1"><strong>陪诊员:</strong> ${appointment.escortRealName}</p>
                                <p class="mb-1"><strong>预约时间:</strong> ${formatDateTime(appointment.appointmentTime)}</p>
                                <p class="mb-1"><strong>费用:</strong> ¥${appointment.totalAmount}</p>
                                ${appointment.status === 'completed' ?
                        `<button class="btn btn-outline-primary btn-sm mt-2" onclick="openReviewModal(${appointment.id}, ${appointment.escortId}, '${appointment.escortRealName}')">
                                        评价服务
                                    </button>` : ''}
                            </div>
                        `;
                    appointmentsList.appendChild(card);
                });
            })
            .catch(error => {
                console.error('获取预约列表失败:', error);
                alert('获取预约列表失败，请刷新重试');
            });
    }

    // 格式化日期时间
    function formatDateTime(dateTimeStr) {
        const date = new Date(dateTimeStr);
        return date.toLocaleString('zh-CN');
    }

    // 获取状态文本
    function getStatusText(status) {
        const statusMap = {
            'pending': '待确认',
            'confirmed': '已确认',
            'completed': '已完成',
            'cancelled': '已取消',
            'rejected': '已拒绝'
        };
        return statusMap[status] || status;
    }

    // 获取状态对应的样式类
    function getStatusClass(status) {
        const classMap = {
            'pending': 'bg-secondary',
            'confirmed': 'bg-primary',
            'completed': 'bg-success',
            'cancelled': 'bg-warning',
            'rejected': 'bg-danger'
        };
    }

